<template>
  <a-spin :spinning="loading">
    <a-form :model="user" :label-col="{span:5}" :wrapper-col="{span:15}">
      <a-form-item label="昵称" v-bind="userValidateInfos.name">
        <a-input v-model:value="user.name" :maxlength="10"/>
      </a-form-item>
      <a-form-item label="头像">
        <a-upload class="avatar-uploader" list-type="picture-card" :show-upload-list="false"
                  accept="image/*" action="/api/file/upload/avatar" v-model:file-list="fileList"
                  :before-upload="beforeUploadAvatar" @change="handleUploadAvatar" :disabled="uploadLoading">
          <a-avatar v-if="user.avatar&&!uploadLoading" :src="user.avatar" :size="100"/>
          <div v-if="!uploadLoading && user.avatar===''">
            <PlusOutlined/>
          </div>
          <a-spin :spinning="uploadLoading"></a-spin>
        </a-upload>
      </a-form-item>
      <a-form-item label="手机号" v-bind="userValidateInfos.phone">
        <a-input v-model:value="user.phone" :maxlength="11" disabled/>
      </a-form-item>
      <a-form-item label="邮箱" v-bind="userValidateInfos.email">
        <a-input v-model:value="user.email"/>
      </a-form-item>
      <a-form-item label="域名" v-bind="userValidateInfos.domain">
        <a-input v-model:value="user.domain" :maxlength="32"/>
      </a-form-item>
      <a-form-item label="性别">
        <a-select v-model:value="user.sex">
          <a-select-option :value="0">未知</a-select-option>
          <a-select-option :value="1">男</a-select-option>
          <a-select-option :value="2">女</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="简介">
        <a-textarea v-model:value="user.introduction"/>
      </a-form-item>
      <a-form-item label="生日">
        <a-date-picker
          v-model:value="user.birthday"
          placeholder="请选择出生日期"
          valueFormat="YYYY-MM-DD"
          style="width: 100%"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 19 }">
        <a-button type="primary" :loading="loading" @click="submitInfo">提交</a-button>
      </a-form-item>
    </a-form>
  </a-spin>
</template>

<script>
import { computed, defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import { domainRegex, emailRegex, nameRegex } from '@/utils/regex'
import { GetDetailedUser, UpdateUser } from '@/service/user'
import { useForm } from '@ant-design-vue/use'
import { PlusOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()

    const state = reactive({
      activeTab: 'data',
      user: {
        name: '',
        domain: '',
        introduction: '',
        sex: 0,
        avatar: '',
        phone: '',
        email: '',
        birthday: '',
        createdTime: ''
      },
      userRules: {
        name: [{
          required: true,
          message: nameRegex.messageRequire
        }, {
          pattern: nameRegex.pattern,
          message: nameRegex.message
        }],
        email: [{
          pattern: emailRegex.pattern,
          message: emailRegex.message
        }],
        domain: [{
          pattern: domainRegex.pattern,
          message: domainRegex.message
        }]
      },
      userValidate: computed(() => useForm(state.user, state.userRules)),
      loading: true,
      fileList: [],
      uploadLoading: false
    })

    const methods = reactive({
      beforeUploadAvatar: file => {
        if (file.type.indexOf('image/') === -1) {
          proxy.$message.warning('请上传图片格式文件!')
          return false
        }
      },
      handleUploadAvatar: info => {
        if (info.file.status === 'uploading') {
          state.uploadLoading = true
          return
        }
        if (info.file.status === 'done') {
          const {
            isSuccess,
            resultData,
            resultMsg
          } = info.file.response
          if (isSuccess) {
            state.user.avatar = resultData
            proxy.$message.success('上传头像成功！')
          } else {
            proxy.$message.error(resultMsg)
          }
          state.uploadLoading = false
        }
      },
      submitInfo: async () => {
        const { outOfDate } = await state.userValidate.validate()
        if (outOfDate === false) {
          return
        }
        state.loading = true
        await UpdateUser(state.user)
        proxy.$message.success('修改完成！')
        state.loading = false
      }
    })

    onMounted(async () => {
      state.user = await GetDetailedUser()
      state.loading = false
    })

    return {
      ...toRefs(state),
      ...toRefs(methods),
      userValidateInfos: state.userValidate.validateInfos
    }
  },
  components: {
    PlusOutlined
  }
})
</script>

<style scoped>

</style>
